<template>
  <!-- Currently `mouseenter` and `mouseleave` is invalid -->
  <!-- <v-content> -->
  <div
    class="v-application--wrap1"
  >
  <v-btn>111</v-btn><v-btn>111</v-btn><v-btn>111</v-btn>
  <v-snackbar>
      ddddd
      </v-snackbar>
    <!-- <v-snackbar
      v-model="visible"
      :color="color || type"
      :top="y === 'top'"
      :left="x === 'left'"
      :bottom="y === 'bottom'"
      :right="x === 'right'"
      :timeout="timeout"
      :vertical="mode === 'vertical'"
      :multi-line="mode === 'multi-line'"
    >
      {{ text }}{{mode}}
      <template v-slot:action="{ attrs }">
      <v-btn
        dark
        text
        icon
        v-bind="attrs"
        @click="close"
      >
        <v-icon>close</v-icon>
      </v-btn>
      </template>
    </v-snackbar> -->
  </div>
  <!-- </v-content> -->
</template>

<script>
export default {
  name: 'SnackBar',
  props: {
    type: {
      type: String,
      default: 'info'
    },
    color: {
      type: String,
      default: null
    },
    text: {
      type: String,
      default: ''
    },
    mode: {
      type: String,
      default: '' // multi-line  or vertical
    },
    timeout: {
      type: Number,
      default: 3500
    },
    x: {
      type: String,
      default: null // left or right
    },
    y: {
      type: String,
      default: 'top' // bottom or top
    }
  },
  data() {
    return {
      visible: true,
      timer: null,
      closed: false,
      duration: this.timeout
    }
  },
  methods: {
    close() {
      this.visible = false
      this.closed = true
      setTimeout(() => {
        // 从DOM里将这个组件移除
        this.$destroy(true)
        // console.log('this.$el', this.$el)
        this.$el.parentNode.removeChild(this.$el)
      }, 500)
    },
    clearTimer() {
      // TODO: Can be disabled when the mouse is over.
      // this.timeout = 0
      clearTimeout(this.timer)
    },
    startTimer() {
      // this.timeout = this.duration
      if (this.duration > 0) {
        this.timer = setTimeout(() => {
          if (!this.closed) {
            this.close()
            this.duration = 0
          }
        }, this.duration)
      }
    },
    keydown(e) {
      // esc关闭消息
      if (e.keyCode === 27 && !this.closed) {
        this.close()
      }
    }
  },
  mounted() {
    // this.duration = this.timeout
    // this.startTimer()
    // document.addEventListener('keydown', this.keydown)
  },
  beforeDestroy() {
    // document.removeEventListener('keydown', this.keydown)
  }
}
</script>
